<template>
<uni-popup
ref="UserBindICCard"
type="center"
:custom=" true "
:zIndex=" 999999999992 ">
  <view class="common-popup-content fill-base radius-26">
    <view class="title">储值卡绑定</view>
    <span class="f-paragraph c-title mt-lg">您尚未绑定储值卡，请先绑定储值卡。</span>
    <view class="fill-body mt-md radius-16" style=" width: 100%; border: 1rpx solid #e4e4e4; ">
      <view class="flex-between ml-lg mr-lg b-1px-b">
        <view class="item-text">卡号</view>
        <input
        v-model=" form.cardNo "
        type="text"
        class="item-input flex-1"
        maxlength="20"
        :placeholder=" rules[ 0 ].errorMsg " />
      </view>
    </view>
    <view class="button">
      <view @tap.stop=" cancel " class="item-child">取消</view>
      <view @tap.stop=" confirm " class="item-child green">确定</view>
    </view>
  </view>
</uni-popup>
</template>
<script>
import { mapActions, mapMutations, mapState } from "vuex"

export default {
  name: "UserBindICCard", components: {

  }, props: {
    show: { type: Boolean, default: () => false }
  }, data() {
    return {
      form: { cardNo: '' }, lockTap: false,
      rules: [ {
        required: true,
        name: "cardNo",
        checkType: "isNotNull",
        errorMsg: "输入IC卡号",
        regType: 2
      } ]
    }
  }, computed: {
    ...mapState( {} )
  }, methods: {
    ...mapActions( [
      'getUserInfo'
    ] ),
    ...mapMutations( [] ), async init() {}, open() {
      this.$util.hideAll()
      this.$refs.UserBindICCard.open()
    }, async cancel() {
      this.$emit( 'cancel' )
      this.$refs.UserBindICCard.close()
    }, async confirm() {
      var param = this.$util.deepCopy( this.form )
      var msg = this.validate( param );
      if( msg ) {
        return this.$util.showToast( {
          title: msg
        } );
      }
      if( this.lockTap ) return
      this.lockTap = true
      this.$util.showLoading()
      try {
        var data = await this.$api.ICCard.bind( param )
        console.log( 'data', data )
        await this.getUserInfo()
        this.$util.hideAll()
        this.$util.showToast( {
          title: `保存成功`,
        } );
        this.lockTap = false
        setTimeout( () => {
          this.$util.back()
          this.$util.goUrl( {
            url: 1,
            openType: `navigateBack`
          } )
        }, 1000 )
      } catch( e ) {
        setTimeout( () => {
          this.lockTap = false
          this.$util.hideAll()
        }, 2000 )
      }
      this.$emit( 'confirm' )
      this.$refs.UserBindICCard.close()
    }, validate( params ) {
      var validate = new this.$util.Validate();
      this.rules.map( item => {
        var { name } = item
        validate.add( params[ name ], item );
      } )
      return validate.start();
    }
  }
}
</script>
<style lang="scss" scoped>
.common-popup-content {
  .item-text {
    width: 100rpx;
    height: 30rpx;
    line-height: 30rpx;
    font-size: 30rpx;
    color: #1F1F1F;
  }

  .item-input {
    min-height: 30rpx;
    line-height: 30rpx;
    padding: 25rpx 0;
    font-size: 26rpx;
    color: #A9A9A9;
  }

  .item-child.green {
    background-color: #5cb85c;
    color: #fff;
  }
}
</style>
